<script setup>
import {ref} from 'vue'

const props = defineProps({
  showData: {
    type: Object,
    required: true
  }
})

const getTagTypeByRiskLevel = (riskLevel) => {
  switch (riskLevel) {
    case '高风险':
      return 'danger';
    case '中风险':
      return 'warning';
    case '低风险':
      return 'success';
    default:
      return 'primary';
  }
}

const getTagTypeByLevel = (level) => {
  switch (level) {
    case '优':
      return 'success';
    case '良':
      return 'warning';
    case '合格':
      return 'primary';
    default:
      return 'danger';
  }
}

</script>

<template>
  <div class="riskDetail">
    <el-descriptions :title="'电缆信息 - '+ showData.line_name + ' - '+ showData.start_end" :column="2" border>
      <el-descriptions-item label="电缆段号">{{ showData.cable_section_number }}</el-descriptions-item>
      <el-descriptions-item label="线路名称">{{ showData.line_name }}</el-descriptions-item>
      <el-descriptions-item label="电缆段起止点" :span="2">{{ showData.start_end }}</el-descriptions-item>
      <el-descriptions-item label="例行试验检测">
        <el-tag v-if="showData.routine_test ==='一般缺陷'" type="primary">{{ showData.routine_test }}</el-tag>
        <el-tag v-if="showData.routine_test ==='严重缺陷'" type="danger">{{ showData.routine_test }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="运行年限">{{ showData.operation_years }} 年</el-descriptions-item>
      <el-descriptions-item label="平均负载率">{{ showData.avg_load_rate.toPrecision(2) }}</el-descriptions-item>
      <el-descriptions-item label="最大负载率">{{ showData.max_load_rate.toPrecision(2) }}</el-descriptions-item>
      <el-descriptions-item label="三年故障次数">{{ showData.three_year_faults }}</el-descriptions-item>
      <el-descriptions-item label="三年其他故障次数">{{ showData.three_year_other_faults }}</el-descriptions-item>
      <el-descriptions-item label="电缆路径">{{ showData.cable_path }}</el-descriptions-item>
      <el-descriptions-item label="电缆数量">{{ showData.cable_number }}</el-descriptions-item>
      <el-descriptions-item label="路径环境">{{ showData.path_environment }}</el-descriptions-item>
      <el-descriptions-item label="平均电缆数量">{{ showData.avg_cable_number }}</el-descriptions-item>
      <el-descriptions-item label="平均负载量">{{ showData.avg_load_volume }}</el-descriptions-item>
    </el-descriptions>
    <el-divider/>
    <el-table :data=" showData.cable_head_list" style="width: 100%" max-height="400" resizable>
      <el-table-column label="接头类型">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="电缆头制作人员的历史故障率">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.historical_failure_rate }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="电缆头施工环境">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.construction_environment }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="电缆头投运年限">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            {{ scope.row.operation_years }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="交接试验检测情况">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-tag :type="getTagTypeByLevel(scope.row.test_results)">{{ scope.row.test_results }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="风险等级">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-tag :type="getTagTypeByRiskLevel(scope.row.risk_level)">{{ scope.row.risk_level }}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<style scoped>

</style>